import React from "react";
import type { FormProps } from "antd";
import { Button, Form, Input } from "antd";
import instance from "../../api/request";
import { useNavigate } from "react-router-dom";
type FieldType = {
  username?: string;
  password?: string;
  account?: string;
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const App: React.FC = () => {
  const nav = useNavigate();
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    instance.post("/login", values).then((res) => {
      if (res.data.token) {
        console.log(res);
        localStorage.setItem("token", res.data.token);
        nav("/home");
      }
    });
  };
  return ((
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item<FieldType>
        label="账号"
        name="account"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType>
        label="密码"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item label={null}>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  ));
};

export default App;
